<template>
  <uni-card>
    <ZForm v-model="csValue" :form-items="formItems" :form-config="formConfig"></ZForm>
    <button @click="cs">点我</button>
    {{ csValue.ce }}
  </uni-card>
  <view class="w-full h-80">
    <qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
  </view>
</template>

<script setup lang="ts">
import ZForm from '@/components/ZForm/index.vue'

const csValue = ref({
  dier: true,
} as AnyObject)

const formItems: formItem[] = [
  {
    name: 'ce',
    type: 'input',
    label: '昵称',
    bind: {
      type: 'nickname',
    },
  },
  {
    name: 'dier',
    type: 'switch',
    label: '名字',
    bind: {
      style: {
        transform: 'scale(0.7)',
      },
    },
  },
  {
    name: 'select',
    type: 'checkbox',
    label: '单选',
    bind: {
      localdata: [
        { value: 2, text: 'cs1' },
        { value: 123, text: 'cs2' },
        { value: 212, text: 'cs3' },
        { value: 211, text: 'cs4' },
      ],
    },
  },
  {
    name: 'number',
    type: 'numberbox',
    label: '数字计步器',
  },
]

const formConfig = {
  labelWidth: 80,
  labelAlign: 'center',
}
const cs = () => {
  console.log(csValue.value)
}

const opts = {
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    data: [
      {
        min: 0,
      },
    ],
  },
  extra: {
    column: {
      type: 'group',
    },
  },
}

const chartData = {
  categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
  series: [
    {
      name: '目标值',
      data: [35, 36, 31, 33, 13, 34],
    },
    {
      name: '完成量',
      data: [18, 27, 21, 24, 6, 28],
    },
  ],
}
</script>

<style lang="scss" scoped>
:deep(.uni-forms-item__label) {
  @apply text-xs;
}
</style>
